<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
    <meta charset="utf-8">
    <title>Code Snippet &mdash; CKEditor Sample</title>
    <script src="../../../ckeditor.js"></script>
    <link href="../../../samples/old/sample.css" rel="stylesheet">
    <link href="../../../plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
    <meta name="ckeditor-sample-name" content="Code Snippet plugin">
    <meta name="ckeditor-sample-group" content="Plugins">
    <meta name="ckeditor-sample-description" content="View and modify code using the Code Snippet plugin.">
    <meta name="ckeditor-sample-isnew" content="1">
    <style>

        #editable {
            padding: 10px 20px;
        }

    </style>
</head>
<body>
<h1 class="samples">
    <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Code Snippet Plugin
</h1>
<div class="warning deprecated">
    This sample is not maintained anymore. Check out its <a href="https://sdk.ckeditor.com/samples/codesnippet.html">brand
    new version in CKEditor SDK</a>.
</div>

<div class="description">
    <p>
        This editor is using the <strong><a href="https://ckeditor.com/cke4/addon/codesnippet">Code Snippet</a></strong>
        plugin which introduces beautiful code snippets.
        By default the <code>codesnippet</code> plugin depends on the built-in client-side syntax highlighting
        library <a href="http://highlightjs.org">highlight.js</a>.
    </p>
    <p>
        You can adjust the appearance of code snippets using the <code><a
            href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-codeSnippet_theme">codeSnippet_theme</a></code>
        configuration variable
        (see <a href="http://highlightjs.org/static/test.html">available themes</a>).
    </p>
    <p>
        Select theme: <select id="select"></select>
    </p>
    <p>
        The CKEditor instance below was created by using the following configuration settings:
    </p>

    <pre class="samples" id="sampleConfig">
CKEDITOR.replace( 'editor1', {
	<strong>extraPlugins: 'codesnippet',</strong>
	codeSnippet_theme: 'monokai_sublime'
} );
</pre>

    <p id="ie8-warning">
        Please note that this plugin is not compatible with Internet Explorer 8.
    </p>
</div>

<textarea id="editor1">
&lt;p&gt;JavaScript code:&lt;/p&gt;

&lt;pre&gt;
&lt;code class="language-javascript"&gt;function isEmpty( object ) {
	for ( var i in object ) {
		if ( object.hasOwnProperty( i ) )
			return false;
	}
	return true;
}&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;SQL query:&lt;/p&gt;

&lt;pre&gt;
&lt;code class="language-sql"&gt;SELECT cust.id FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Unknown markup:&lt;/p&gt;

&lt;pre&gt;
&lt;code&gt; ________________
/                \
| How about moo? |  ^__^
\________________/  (oo)\_______
                  \ (__)\       )\/\
                        ||----w |
                        ||     ||
&lt;/code&gt;&lt;/pre&gt;
	</textarea>

<h2>Inline editor</h2>

<div class="description">
    <p>
        The following sample shows the <strong>Code Snippet</strong> plugin running inside
        an inline CKEditor instance. The CKEditor instance below was created by using the following configuration
        settings:
    </p>

    <pre class="samples">
CKEDITOR.inline( 'editable', {
	<strong>extraPlugins: 'codesnippet'</strong>
} );
</pre>

    <p>
        <strong>Note</strong>: The <a href="http://highlightjs.org/static/test.html">highlight.js themes</a>
        must be loaded manually to be applied inside an inline editor instance, as the
        <code>codeSnippet_theme</code> setting will not work in that case.
        You need to include the stylesheet in the <code>&lt;head&gt;</code> section of the page, for example:
    </p>

    <pre class="samples">
&lt;head&gt;
	...
	&lt;link href="path/to/highlight.js/styles/monokai_sublime.css" rel="stylesheet"&gt;
&lt;/head&gt;
</pre>

</div>

<div id="editable" contenteditable="true">

    <p>JavaScript code:</p>

    <pre><code class="language-javascript">function isEmpty( object ) {
	for ( var i in object ) {
		if ( object.hasOwnProperty( i ) )
			return false;
	}
	return true;
}</code></pre>

    <p>SQL query:</p>

    <pre><code class="language-sql">SELECT cust.id, cust.name, loc.city FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );</code></pre>

    <p>Unknown markup:</p>

    <pre><code> ________________
/                \
| How about moo? |  ^__^
\________________/  (oo)\_______
                  \ (__)\       )\/\
                        ||----w |
                        ||     ||
</code></pre>
</div>

<h2>Server-side Highlighting and Custom Highlighting Engines</h2>

<p>
    The <a href="https://ckeditor.com/cke4/addon/codesnippetgeshi"><strong>Code Snippet GeSHi</strong></a> plugin is an
    extension of the <strong>Code Snippet</strong> plugin which uses a server-side highligter.
</p>

<p>
    It also is possible to replace the default highlighter with any library using
    the <a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_codesnippet_highlighter.html">Highlighter
    API</a>
    and the <a
        href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_codesnippet.html#method-setHighlighter"><code>editor.plugins.codesnippet.setHighlighter()</code></a>
    method.
</p>

<script>
    (function () {
        CKEDITOR.disableAutoInline = true;

        var config = {
            extraPlugins: 'codesnippet',
            toolbar: [
                ['Source'], ['Undo', 'Redo'], ['Bold', 'Italic', 'Underline'], ['CodeSnippet']
            ],
            codeSnippet_theme: 'monokai_sublime',
            height: 400
        };

        CKEDITOR.replace('editor1', config);

        CKEDITOR.inline('editable', CKEDITOR.tools.extend({}, config, {
            extraPlugins: 'codesnippet'
        }, true));

        initThemeChange();

        function initThemeChange() {
            var templates = [
                    'monokai_sublime', 'default', 'arta', 'ascetic', 'atelier-dune.dark', 'atelier-dune.light', 'atelier-forest.dark', 'atelier-forest.light', 'atelier-heath.dark', 'atelier-heath.light', 'atelier-lakeside.dark', 'atelier-lakeside.light', 'atelier-seaside.dark', 'atelier-seaside.light', 'brown_paper', 'dark', 'docco', 'far', 'foundation', 'github', 'googlecode', 'idea', 'ir_black', 'magula', 'mono-blue', 'monokai', 'obsidian', 'paraiso.dark', 'paraiso.light', 'pojoaque', 'railscasts', 'rainbow', 'school_book', 'solarized_dark', 'solarized_light', 'sunburst', 'tomorrow-night-blue', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'tomorrow-night', 'tomorrow', 'vs', 'xcode', 'zenburn'
                ],
                pre = CKEDITOR.document.getById('sampleConfig'),
                select = CKEDITOR.document.getById('select'),
                codeTemplate = 'CKEDITOR.replace( \'editor1\', {\n' +
                    '	<strong>extraPlugins: \'codesnippet\',</strong>\n' +
                    '	codeSnippet_theme: \'{tpl}\'\n' +
                    '} );',
                name, option;

            while ((name = templates.shift())) {
                option = CKEDITOR.document.createElement('option', {
                    attributes: {
                        value: name
                    }
                });

                option.setText(name);
                select.append(option);
            }

            select.$.onchange = function () {
                if (CKEDITOR.instances.editor1)
                    CKEDITOR.instances.editor1.destroy();

                CKEDITOR.replace('editor1', CKEDITOR.tools.extend({}, config, {
                    codeSnippet_theme: this.value
                }, true));

                pre.setHtml(codeTemplate.replace('{tpl}', this.value));
            };
        }

        if (CKEDITOR.env.ie && CKEDITOR.env.version == 8)
            CKEDITOR.document.getById('ie8-warning').addClass('warning');
    }());
</script>

<div id="footer">
    <hr>
    <p>
        CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
    </p>
    <p id="copy">
        Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
        Knabben. All rights reserved.
    </p>
</div>
</body>
</html>
